<template>
  <div id="login" style="font-szie:0.16rem">
    <div class="login-box">
      <!-- <p class="topicon">&lt;</p> -->
      <div class="login-containner">
        <p class="lgtitle">
          <span class="lgts" @click="isps=false" :class="{active:!isps}">快捷登录</span> |
          <span class="lgts"  @click="isps=true" :class="{active:isps}">密码登录</span>
        </p>
        <!-- 手机登录 -->
        <div class="paform" v-if="isps">
          <form action>
            <input type="text" v-model="phone" name="phone" class="lgphone" placeholder="请11位输入手机号">
            <input type="password" v-model="password" name="password" class="lgpassword"  placeholder="请输入密码" autocomplete="new-password">
            <input type="button" class="lgbtn" @click="pasto" :class="{active:ispalogin}" value="登录">
          </form>
					<div v-if="phoneyz" class="rephone-box">
						<span class="gou" v-if="pyz">√</span>
						<span class="cuo" v-else>X</span>
					</div>
					<div v-if="passwordyz" class="repassword-box">
						<span class="gou" v-if="passyz">√</span>
						<span class="cuo" v-else>X</span>
					</div>
        </div>
        <!-- 短信登录 -->
        <div class="paform" v-else>
          <form action>
            <input type="text" v-model="phone" name="phone" class="lgphone" placeholder="请11位输入手机号">
            <input type="text" name="yzm" class="lgpassword yzm"  placeholder="请输入验证码">
            <span class="hqyzm">获取验证码</span>
            <input type="button" class="lgbtn" value="登录">
          </form>
        </div>
        <div class="lgfoot">
          <router-link to class="torea">忘记密码</router-link>
        </div>
        <div id="tore">
          <span class="torespan">还没有账号？</span>
          <router-link to="/registor" class="torea">立即注册</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
  data() {
    return {
      isps: false,
      ispalogin: false,
      acclass: {
        active: this.isps
      },
      phone: "",
      password: "",
			pyz:true,
			passyz:false,
			phoneyz:false,
			passwordyz:false
    };
  },
  watch: {
    phone(v,old) {
			var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(v.length>11){
				this.phone=old;
			}
			if(v.length==0){
				this.phoneyz=false
			}else{
				this.phoneyz=true
			}
			if(myreg.test(v)){
				this.pyz=true;
			}else{
				this.pyz=false
			}

      if (this.passyz&&this.pyz) {
        this.ispalogin = true;
      } else {
        this.ispalogin = false;
      }
    },
    password(v,old) {
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
      if(v.length==0){
      	this.passwordyz=false
      }else{
      	this.passwordyz=true
      }
      if(v.length>=6&&v.length<=16){
      	this.passyz=true
      }else{
      	this.passyz=false;
      }
      if(v.length>16){
      	this.password=old;
      }
      if (this.passyz&&this.pyz) {
        this.ispalogin = true;
      } else {
        this.ispalogin = false;
      }
    }
  },
  methods: {
    ...mapActions(['checkLogin','setUid']),
    pasto() {
      if(this.ispalogin){
				let postData = this.$qs.stringify({
				          phone: this.phone,
				    password: this.password
				        });
				this.axios({
				  url: `${this.$config.dataUrl}/v1/user/login`,
				  method:"post",
				  data: postData
				}).then(res => {
				  if (res.data.status == 200) {
				    this.checkLogin(true);
				    this.setUid(res.data.data.id);
            this.checkLogin(true);
            this.axios({
                url:`${this.$config.dataUrl}/v1/cart/selectCart?uid=${this.$store.getters.uid}`,
                method:"get"
            }).then(res=>{
                this.$store.dispatch('setcartNum', 0);
                if(res.status == '200' ){
                  res.data.forEach(element => {
                    this.$store.dispatch('increase', element.count);
                  });
                    this.$router.push("/");
                }
            })
				  }else{
				    alert("密码错误");
				    this.phone="";
				    this.password="";
				  }
				});
			}
    }
  },
  computed: {
    ...mapGetters(['login',"uid"])     //boolean
  },
};
</script>
<style scoped lang="scss">

#login {
  width: 19.2rem;
  height: 9rem;
  background-image: url("../../assets/img/login/bg.png");
}
.login-box {
  width: 5rem;
  height: 6rem;
  background-color: #fff;
  position: absolute;
  top: 1.9rem;
  left: 7.1rem;
}
.topicon {
  line-height: 0.9rem;
  margin-left: 0.37rem;
  font-size: 0.24rem;
  font-weight: 900;
}
.lgtitle {
  width: 3rem;
  font-weight: 9rem;
  text-align: center;
  position: absolute;
  color: #d2d2d2;
  top: 1.2rem;
  font-size: 0.22rem;
  line-height: 0.22rem;
  left: 1rem;
}
.lgtitle .active {
  color: #000;
}
.lgtitle span {
  font-weight: 100;
  padding: 0 0.3rem;
  cursor:pointer;
}
.paform input {
  position: absolute;
  display: block;
  width: 3rem;
  border: 0;
  line-height: 0.48rem;
  height: 0.48rem;
  border-bottom: 0.01rem solid #ccc;
  outline: none;
  font-size: 0.16rem;
  left: 1rem;
}
.paform .lgphone {
  top: 1.65rem;
}
.paform .lgpassword {
  top: 2.13rem;
}
.paform .lgpassword.yzm {
  width: 2rem;
}
.hqyzm {
  position: absolute;
  top: 2.3rem;
  height: 0.3rem;
  width: 1rem;
  text-align: center;
  left: 3rem;
  background-color: #d2d2d2;
  color: #fff;
  line-height: 0.3rem;
  font-size: 0.16rem;
}
.paform .lgbtn {
  width: 3rem;
  height: 0.5rem;
  position: absolute;
  top: 3.34rem;
  left: 1rem;
  color: #fff;
  font-size: 0.22rem;
	cursor: not-allowed;
}
.lgbtn.active {
  background-color: green;
	cursor: pointer
}
.lgfoot {
  position: absolute;
  top: 3.93rem;
  left: 1rem;
  width: 3rem;
  text-align: center;
  color: #444;
  font-size: 0.16rem;
  text-align: left;
}

#tore {
  position: absolute;
  display: block;
  width: 5rem;
  bottom: 0rem;
  color: #999;
  text-align: center;
  line-height: 0.5rem;
  background-color: #f1f1f1;
  font-size: 0.16rem;
}
.torea {
  color: #333;
}
.rephone-box .gou{
	position:absolute;
	top:1.7rem;
	left:3.6rem;
	color:#0f0;
	font-size:0.24rem;
}
.repassword-box .gou{
	position:absolute;
	top:2.2rem;
	left:3.6rem;
	color:#0f0;
	font-size:0.24rem;
}
.rephone-box .cuo{
	position:absolute;
	top:1.7rem;
	left:3.6rem;
	color:#f00;
	font-size:0.24rem;
}
.repassword-box .cuo{
	position:absolute;
	top:2.2rem;
	left:3.6rem;
	color:#f00;
	font-size:0.24rem;
}
</style>
